import React from 'react'
import {
  FontSizeOutlined, InstagramOutlined,
  CustomerServiceOutlined, PlaySquareOutlined, ProductOutlined, 
} from '@ant-design/icons';
import { useSelector } from 'react-redux';
function dragDropBox_left() {
  const iconAll = [
    {
      icon: <FontSizeOutlined />,
      text: '图文'
    },
    {
      icon: <InstagramOutlined />,
      text: '单页'
    },
    {
      icon: <CustomerServiceOutlined />,
      text: '装饰'
    },
    {
      icon: <PlaySquareOutlined />,
      text: '艺术字'
    }, {
      icon: <ProductOutlined />,
      text: '我的'
    }
  ]
  // 获取仓库里侧边数据
  const componentsData = useSelector((state:any)=>state.reducer.componentsData)
  // 拖动开始
  const dragstart=(event:any)=>{
    // 把拖动元素标记得下标存储起来
    event.dataTransfer.setData('index',event.target.dataset.index)
  }
  return (
    <div className='option'>
      <div className="option_slider">
        {
          iconAll.map((item: any, index: any) => (
            <dl key={index}>
              <dt>{item.icon} </dt>
              <dd>{item.text} </dd>
            </dl>
          ))
        }
      </div>
      <div className='option_style'>
        {
          componentsData.map((item:any,index:any)=>(
            <div style={{lineHeight:'40px' }} draggable="true"  onDragStart={dragstart} data-index={index} key={index}>{item.lable}</div>
          ))
        }
      </div>
    </div>
  )
}

export default dragDropBox_left
